<template>
	<div class="box" ref="mainRight" id="rightCont">
	<!-- 头部图标页面名称 -->
	<div class="main" id="main">
		<div class="header">
			<div class="header-tab">
				<div class="iconTitle">
					<i class="el-icon-flxz" style="border-radius: 50%;font-size: 20px;padding: 2px;margin-left: 8px;background-color: #409EFF;color: #fff;"></i>
					<span style="font-weight:400;margin-left: 12px;font-size: 12px;">{{ CatalogueName }}</span>
				</div>
				<div class="tabs">
					<el-tabs v-model="activeName" @tab-click="tabsHandleClick">
						<el-tab-pane label="草稿"   name="0"></el-tab-pane>
						<el-tab-pane label="已提交" name="2"></el-tab-pane>
						<el-tab-pane label="已审核" name="4"></el-tab-pane>
						<el-tab-pane label="已过单" name="5"></el-tab-pane>
						<el-tab-pane label="已冲销" name="6"></el-tab-pane>
					</el-tabs>
				</div>
			</div>
			<!-- btn2 -->
			<div class="header-bottom">
				<el-select v-model="ksValue" @clear="clearKs" clearable placeholder="申请科室" size="mini" style="width: 94px;">
					<el-option
					  v-for="item in optionks"
					  :key="item.id"
					  :label="item.label"
					  :value="item.id">
					  <span style="float: left;font-size: 12px">{{ '编码：' + item.code }}</span>
					  <span style="float: right;font-size: 12px">{{ '名称：' + item.label }}</span>
					</el-option>
				</el-select>
				<!-- 供货单位 -->
				<el-select v-model="GysValue" @clear="clearGys" clearable placeholder="供货单位" size="mini" style="width: 158px;">
					<el-option
					  v-for="item in gysOption"
					  :key="item.id"
					  :label="item.label"
					  :value="item.id">
					  <span style="float: left;font-size: 12px">{{ '名称：' + item.label }}</span>
					  <span style="float: right;font-size: 12px">{{ '许可证号：' + item.permitNumber }}</span>
					</el-option>
				</el-select>
				<!-- 药品名称 -->
				<!-- <el-select v-model="drugValue" @clear="clearDrug" clearable placeholder="药品名称" size="mini" style="width: 158px;">
					<el-option
					  v-for="item in drugOption"
					  :key="item.id"
					  :label="item.label"
					  :value="item.label">
					  <span style="float: left;font-size: 12px">{{ '名称：' + item.label }}</span>
					  <span style="float: right;font-size: 12px">{{ '批准文号：' + item.approvalNumber }}</span>
					</el-option>
				</el-select> -->
				<!-- 时间 -->
				<el-select v-model="dateTimeValue" placeholder="创建时间" size="mini" style="width: 99px;">
					<el-option
					  v-for="item in dateTimeOption"
					  :key="item.id"
					  :label="item.label"
					  :value="item.label">
					  <span style="float: left;font-size: 12px">{{  item.label }}</span>
					</el-option>
				</el-select>
				<!-- dateTimer -->
				<div class="block">
					<el-date-picker v-model="startDate" type="datetime" size="mini" placeholder="选择开始时间" align="right" 
						:picker-options="pickerOptions" @change="startDateHandle"> 
					</el-date-picker>
					<el-date-picker v-model="endDate" type="datetime" style="margin-left: 8px;" size="mini" placeholder="选择结束时间" align="right"
						:picker-options="pickerOptions" @change="endDateHandle">
					 </el-date-picker>
				</div>
				<!-- 查找按钮 -->
				<el-button size="mini" :loading="loading" type="info" @click="found" icon="el-icon-Ssearch">查询</el-button>
				<!-- 重置按钮 -->
				<el-button size="mini" plain type="info" @click="rest">重置</el-button>
			</div>
			<!-- 按钮 -->
			<div class="header-btns">
				<div class="feetBtn">
					<el-button v-for="(v,i) in feetBtn" :key="i" :type="v.type" :disabled="v.disabled"
					:loading="loading" :icon="v.icon" size="mini" @click="feetHandClick(v,i)">{{ v.title }}</el-button>
				</div>
				<div class="headBtn">
					<el-button v-for="(v,i) in headerBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="mini"
					 @click="handClick(v,i)">{{ v.title }}</el-button>
					 <!-- 展开/折叠按钮 -->
					 <el-tooltip :content="isExpanded ? '展开' : '折叠'" placement="top" style="margin-left: 12px;">
					 	<i :class="isExpanded ? 'el-icon-maximize' : 'el-icon-bumenOpen'" 
					 	@click="toggleExpandAll" style="cursor: pointer; margin-right: 8px;"></i>
					 </el-tooltip>
					 <!-- tooltipBtns -->
					 <div class="tooltips" v-for="(item,index) in tooltipBtns" :key="item.title">
						 <!-- 循环图标按钮 -->
						 <el-tooltip :content="item.title" :placement="item.type">
						 	<i :class="item.icon" @click="tooltipsHand(item,index)" style="cursor: pointer; margin-right: 8px;"></i>
						 </el-tooltip>
					 </div>
				</div>
			</div>
		</div>
		<!-- table -->
		<div class="table">
			<el-table 
			  ref="table"
			  :data="tableData" 
			  :max-height="tableHeight"
			  highlight-current-row 
			  @current-change="handleCurrentTableChange"
			  @selection-change="handleSelectionChange"
			  show-summary 
			  :summary-method="getSummaries"
			  :row-key="getRowKeys"
			  :default-expand-all="false"
			>
			<!-- 添加多选列 -->
			<!-- <el-table-column 
			  type="selection" 
			  width="50"
			  align="center">
			</el-table-column> -->
			<!-- 修改展开列 -->
			<el-table-column type="expand" width="50" class-name="custom-expand-column">
				<template slot-scope="props">
				  <div class="expand-content-wrapper" style="height: 60px;">
					<el-descriptions 
					  class="margin-top" 
					  :column="8" 
					  border
					  size="mini"
					>
					<el-descriptions-item label="单据编号">{{ props.row.docNum }}</el-descriptions-item>
					<el-descriptions-item label="业务日期">{{ props.row.busDate }}</el-descriptions-item>
					<el-descriptions-item label="供货单位">{{ props.row.supplierName }}</el-descriptions-item>
					<el-descriptions-item label="供货单号">{{ props.row.supplyCode }}</el-descriptions-item>
					<el-descriptions-item label="成本金额">{{ props.row.costAmt }}</el-descriptions-item>
					<el-descriptions-item label="零售金额">{{ props.row.saleAmt }}</el-descriptions-item>
					<el-descriptions-item label="入库方式">{{ props.row.reviewName }}</el-descriptions-item>
					<el-descriptions-item label="审核时间">{{ props.row.reviewTime }}</el-descriptions-item>
					<el-descriptions-item label="过单人">{{ props.row.passingOrdersName }}</el-descriptions-item>
					<el-descriptions-item label="过单时间">{{ props.row.passingOrdersTime }}</el-descriptions-item>
					<el-descriptions-item label="作废人">{{ props.row.nullifyId }}</el-descriptions-item>
					<el-descriptions-item label="作废时间">{{ props.row.nullifyTime }}</el-descriptions-item>
				  </el-descriptions>
					</div>
				  </template>
			</el-table-column>
			<!-- 表格行rows -->
			<!-- <el-table-column fixed="left" label="行号"  type="index" width="68" align="center"></el-table-column> -->
			<el-table-column type="index" label="行号"></el-table-column>
			<el-table-column prop="id" label="系统序号" width="88"></el-table-column>
			<el-table-column prop="docNum" label="单据编号" width="88">
				<template slot-scope="{ row }">
					<span style="color: #00557f;font-weight: bold;">{{ row.docNum }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="busDate" label="业务日期" width="108" sortable>
				<template slot-scope="{ row }">
					<span style="font-weight: bold;">{{ row.busDate }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态">
				 <template slot-scope="{ row }">
					<!-- 根据state显示不同的图标 -->
					<div class="stateValue" style="border-radius: 4px;text-align: center;">
						<i :class="statusIconMap[row.state]" :style="{ color: statusColorMap[row.state] }"></i>
						<span>{{ statusMap[row.state] || '未知状态' }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="phayId" label="入库库房">
				 <template slot-scope="{ row }">
					<!-- 根据state显示不同的图标 -->
					<div class="stateValue" style="border-radius: 4px;text-align: center;">
						<i :class="sheIdIconMap[row.phayId]" :style="{ color: sheIdColorMap[row.phayId] }"></i>
						<span>{{ sheIdMap[row.phayId] || '' }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="putinTypeId" label="入库方式">
				 <template slot-scope="{ row }">
					<!-- 根据state显示不同的图标 -->
					<div class="stateValue" style="border-radius: 4px;text-align: center;">
<!-- 						<i :class="putinTypeIconMap[row.putinTypeId]" :style="{ color: putinTypeColorMap[row.putinTypeId] }"></i> -->
						<span>{{ putinTypeMap[row.putinTypeId] || '未知状态' }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name" :width="columnWidth(col, tableData)"></el-table-column>
			<!-- fixed -->
			
			<!-- edit -->
			<el-table-column fixed="right" label="操作" width="88">
				  <template slot-scope="scope">
					<div class="editbox" v-if="scope.row.state == 0">
						<el-link type="info" @click="handleClickEdit(scope.row)" size="mini" style="font-size: 12px;">修改</el-link>
						<el-link type="danger" @click="handleDelete(scope.row)" size="mini" style="margin-left: 12px;font-size: 12px;">删除</el-link>
					</div>
					<div class="editbox" v-else style="text-align: center;">
						<!-- 根据state显示不同的图标 -->
						<i :class="statusIconMap[scope.row.state]" :style="{ color: statusColorMap[scope.row.state] }"></i>
						<span>{{ statusMap[scope.row.state] || '未知状态' }}</span>
					</div>
				  </template>
				</el-table-column>
			</el-table>
		</div>
		
		<!-- feet -->
		<div class="feet">
			<!-- 分页 -->
			<el-pagination
			style="margin: 12px;"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="pageNum"
			:page-sizes="[20,50,100]"
			:page-size="pageSize"
			:total="totalSize"
			layout="total, sizes, prev, pager, next, jumper"
			background>
			</el-pagination>
		</div>
	</div>
	
		<!-- add dialog -->
		<div class="addDiglog">
		<!-- <el-dialog title="新增采购计划" :visible.sync="addDialogVisible" width="68%" :before-close="handleClose"> -->
			<addDiglog ref='sonRef' :parent-method="loadData"></addDiglog>
		<!-- </el-dialog> -->
		</div>
		<!-- 修改 -->
		<div class="editdiglog">
			<!-- <editDiglog ref='editSonRef' @Update="loadData" :parent-method="loadData"></editDiglog> -->
		</div>
		<!-- 审核过单 -->
		<div class="editdiglog">
			<exaDiglog ref='exaRef' @Update="loadData" :parent-method="loadData"></exaDiglog>
		</div>
		
		<!-- 设置对话框 -->
		<div class="tool">
			<el-dialog title="高级选项设置" :visible.sync="settingDialogVisible" width="30%">
			  <el-form>
				<el-form-item label="是否需要审核">
				    <el-checkbox v-model="quickRefer"></el-checkbox>
				</el-form-item>
			    <el-form-item label="是否快捷调拨">
			      <el-checkbox v-model="quickTransfer"></el-checkbox>
			    </el-form-item>
			  </el-form>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="settingDialogVisible = false" size="mini">取消</el-button>
			    <el-button type="primary" @click="saveSettings" size="mini">保存</el-button>
			  </span>
			</el-dialog>
		</div>
		<div class="excel">
			<!-- Excel导入对话框 -->
			  <el-dialog 
			    title="Excel导入" 
			    :visible.sync="excelDialogVisible" 
			    width="68%"
			    top="5vh"
			    custom-class="excel-import-dialog"
			  >
			    <div class="excel-import-container">
			      <!-- 左侧上传区域 -->
			      <div class="left-panel">
			        <!-- 上传头部 -->
			        <div class="upload-header">
			          <el-upload
			            class="upload-demo"
			            drag
			            action=""
			            :auto-upload="false"
			            :file-list="excelFileList"
			            :before-upload="beforeExcelUpload"
			            :on-change="handleExcelChange"
			            accept=".xlsx, .xls"
			          >
			            <i class="el-icon-upload"></i>
			            <div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传</em></div>
			            <div class="el-upload__tip" slot="tip">只能上传xlsx/xls文件，且不超过10MB</div>
			          </el-upload>
			        </div>
			
			        <!-- 文件信息区域 -->
			        <div class="file-info">
			          <div class="file-type-select">
			            <el-form label-width="80px" size="mini">
			              <el-form-item label="文件类型">
			                <el-select v-model="fileType">
			                  <el-option label="Excel" value="excel"></el-option>
			                </el-select>
			              </el-form-item>
			              <el-form-item label="文件路径">
			                <el-input 
			                  v-model="filePath" 
			                  placeholder="上传后自动显示文件路径"
			                  readonly
			                >
			                  <el-button 
			                    slot="append" 
			                    icon="el-icon-refresh"
			                    @click="reSelectFile"
			                    :disabled="!excelFileList.length"
			                  >重新选择</el-button>
			                </el-input>
			              </el-form-item>
			            </el-form>
			          </div>
			
			          <!-- 文件列表表格 -->
			          <div class="file-table">
			            <el-table :data="fileList" border height="188">
			              <el-table-column style="font-size: 12px;" prop="name" label="文件名称" width="180"></el-table-column>
			              <el-table-column style="font-size: 12px;" prop="path" label="文件路径" show-overflow-tooltip></el-table-column>
			              <el-table-column style="font-size: 12px;" prop="status" label="状态" width="100">
			                <template slot-scope="{row}">
			                  <el-tag :type="row.status === '导入成功' ? 'success' : 'danger'" size="mini">
			                    {{row.status}}
			                  </el-tag>
			                </template>
			              </el-table-column>
			              <el-table-column label="操作" width="80" align="center">
			                <template slot-scope="{row}">
			                  <el-button 
			                    type="danger" 
			                    icon="el-icon-del" 
			                    size="mini" 
			                    circle
			                    @click="removeFile(row)"
			                  ></el-button>
			                </template>
			              </el-table-column>
			            </el-table>
			          </div>
			        </div>
			
			        <!-- 底部操作按钮 -->
			        <div class="action-footer">
			          <el-button 
			            type="primary" 
			            size="medium" 
			            @click="submitExcel"
			            :loading="loading"
			            :disabled="!excelTableData.length"
			          >立即执行</el-button>
			        </div>
			      </div>
			
			      <!-- 右侧预览区域 -->
			      <div class="right-panel">
			        <div class="preview-header">
			          <h4>数据预览 (共 {{ excelTableData.length }} 条记录)</h4>
			        </div>
			        
			        <!-- 预览表格 -->
			        <div class="preview-table">
			          <el-table
			            :data="excelTableData"
			            border
			            height="500"
			            v-loading="loading"
			          >
			            <el-table-column
			              v-for="col in excelColumns"
			              :key="col.prop"
			              :prop="col.prop"
			              :label="col.label"
			              :width="col.width"
			              show-overflow-tooltip
			            ></el-table-column>
			          </el-table>
			        </div>
			
			        <!-- 分页区域 -->
			        <div class="pagination-footer">
			          <el-pagination
			            small
			            layout="prev, pager, next"
			            :total="excelTableData.length"
			            :page-size="pageSize"
			            @current-change="handlePageChange"
			          ></el-pagination>
			        </div>
			      </div>
			    </div>
			  </el-dialog>
		</div>
		
	</div>
	
</template>

<script>
	// selfs / props
	import addDiglog from "./addRukuDiglog.vue"; //新增Model
	import exaDiglog from "./exaStoreDiglog.vue"; //审核.过单Model
	import * as XLSX from 'xlsx';  // 修改这里，使用 * as 导入
	// selfs / js
	import addForm from './addForm.js' //Form表单
	// xter
	// 接口
	// import { dugDocPage,toDrugExamine,selectDropDownList,deletePlanData,getWare } from "@/api/PSI.js";
	
	import { toDrugExamine,getDrugDetails,deleteDoc,selectDropDownList,getWare } from "@/api/PSI.js";
	
	import { dugDocPage } from "@/api/MedicenHouse/Western.js";
	
	
	export default{
		inject: ['reload'], // 无痕刷新
		components:{
			addDiglog,exaDiglog
		},
		data(){
			return{
				// str
				windowWidth:'', //右侧表格动态宽度
				CatalogueName:'其他入库【西药房】',
				nameTitle:'其他入库【西药房】',
				DropDownedName:'全部单据',
				selectedValue:'',
				selectedValueGys:'', // 供应商选择
				tableHeight:'570', // table的高度，以便超出高度显示滚动条
				currentHeight:'', // 用于计算table的高度，以便超出高度显示滚动条
				// blean
				isExpanded: false, // 控制展开/折叠状态
				loading:false,
				dialogVisible:false,
				showFeetBtn:false,
				gdDialogVisible: false,
				isAllSelected: false, // 新增：是否全选
				// ...高级选项设置
				settingDialogVisible: false,
				quickTransfer: false, // 高级选项 => 快速调拨
				quickRefer: true, // 高级选项 => 需要审核
				auditStatus:'',
				startDate:'', //开始时间
				endDate:'', //结束时间
				formattedDate: '', // 用于存储格式化后的日期时间
				// number
				state:'', // 状态
				pageNum: 1, //当前页currentPage
				pageSize: 20,
				totalSize: 0, //总条数
				activeName:'a',
				ksValue:'',
				GysValue:'',
				filePath:'',
				fileList:'',
				fileType: 'excel',
				dateTimeValue:'创建时间',
				undefined:'未知错误！请联系管理员', // 错误提示
				drugValue:'',
				excelDialogVisible: false,  // 控制Excel导入对话框显示
				excelFileList: [],         // 上传的文件列表
				excelTableData: [],        // 解析后的Excel数据
				excelColumns: [],          // Excel表头
				uploadUrl: '/api/importExcel', // 模拟上传接口
				uploadHeaders: {
				  'Authorization': localStorage.getItem('token')
				},
				// arr title右侧按钮
				headerBtn: [
				  { title: "刷新", type: "top", icon: "el-icon-refresh" },
				  { title: "打印", type: "",icon: "el-icon-printer",disabled: !this.canPrint }, // 根据canPrint计算属性禁用/启用
				  { title: "高级选项", type: "", icon: "el-icon-lcyt" },
				],
				tooltipBtns:[
				 { title:"导出", type:"top", icon:"el-icon-finished" },
				 // { title:"打印", type:"top", icon:"el-icon-printer" },
				 // { title:"导出", type:"", icon:"el-icon-finished" },
				 { title:"关闭", type:"top", icon:"el-icon-close" },
				],
				selecteds:[
				  { title:"全部单据", command:"a" },{ title:"已提交", command:"b" },{ title:"已审核", command:"c" },
				  { title:"已过单", command:"d" },{ title:"已作废", command:"e" },
				],
				// 添加多选数据
				multipleSelection: [], // 存储选中的行数据
				// 页面默认按钮// 基础按钮配置（始终显示）
				defaultButtons:[
					{ refesh:"refesh", title:"冲销", type:"danger", icon:"el-icon-lszt" },
					// { refesh:"refesh", title:"新增", type:"success", icon:"el-icon-adds" },
					{ refesh:"refesh", title:"提交", type:"primary", icon:"el-icon-finished" },
					{ refesh:"refesh", title:"审核", type:"primary", icon:"el-icon-document-checked" },
					{ refesh:"refesh", title:"过单", type:"primary", icon:"el-icon-sort" },
					{ refesh:"refesh", title:"查看明细", type:"primary", icon:"el-icon-printer" },
					{ refesh:"refesh", title:"Excel表格导入", type:"success", icon:"el-icon-tnzdsj" },
				],
				// 最终使用的按钮数组
				feetBtn: [],
				optionks:[{id:1,code:'001',label:'西药库'}],
				dateTimeOption:[{id:1,label:'创建时间'},{id:2,label:'提交时间'},{id:3,label:'审核时间'},{id:4,label:'过单时间'}],
				drugOption: [],
				// 单据状态 0 草稿,1 回退提交,2 已提交,3 回退审核,4 已审核,5 已过单,6 已作废'
				statusOption:[
					{id:0,label:'草稿'},{id:1,label:'回退提交'},{id:2,label:'已提交'},{id:3,label:'回退审核'},{id:4,label:'已审核'},{id:5,label:'已过单'},{id:6,label:'已作废'},
				], 
				gysOption:[],
				options:[{value: '制单时间',label: '制单时间'},{value: '过单时间',label: '过单时间'},{value: '操作时间',label: '操作时间'},{value: '业务日期',label: '业务日期'}],
				currentTable: [],//表格单选
				tableRows:[
					{ name:"供货单位", prop:"supplierName"},{ name:"供货单号", prop:"supplyCode" },
					{ name:"成本金额", prop:"costAmt"},{ name:"零售金额", prop:"saleAmt" },
					{ name:"发票编号", prop:"purcInvoCodg"},
					{ name:"制单人", prop:"createName"},{ name:"制单时间", prop:"createTime" },
					{ name:"审核人", prop:"reviewName"  },{ name:"审核时间", prop:"reviewTime"},
					{ name:"过单人", prop:"passingOrdersName" },{ name:"过单时间", prop:"passingOrdersTime" },
					{ name:"冲销人", prop:"nullify" },{ name:"冲销时间", prop:"nullifyTime"  },
					{ name:"备注", prop:"remarks"},
				],
				pickerOptions: {
				  shortcuts: [
					{ text: '今天', onClick(picker) { picker.$emit('pick', new Date()); }}, 
					{ text: '昨天', onClick(picker) { const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit('pick', date);}}, 
					{ text: '一周前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', date);}},
					{ text: '最近一个月',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);picker.$emit('pick', date);}},
					{ text: '最近三个月',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 90);picker.$emit('pick', date);}},
					{ text: '半年前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 180);picker.$emit('pick', date);}},
					{ text: '去年',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 360);picker.$emit('pick', date);}},
					]
				},
				computed: {
				  // 计算属性判断是否是多选状态
				  isMultipleSelected() {
				    return this.multipleSelection.length > 1;
				  },
				  // 计算属性判断是否是单条选中
				  isSingleSelected() {
				    return this.multipleSelection.length === 1;
				  },
				  // 计算属性判断是否有选中项
				  hasSelection() {
				    return this.multipleSelection.length > 0;
				  },
				  // 判断当前选中行是否可以打印（state=5）
				  canPrint() {
				    return this.currentTable && this.currentTable.state === 5;
				  },
				   pagedTableData() {
				        const start = (this.currentPage - 1) * this.pageSize;
				        const end = start + this.pageSize;
				        return this.excelTableData.slice(start, end);
				    }
				},
				tableData: [],
				addForm:{}, // 新增参数 => 改状态 form表单 * 
				//props
				sheIdMap: {
					'1': '西药库',
					'2': '中药库',
					'3': '西药房',
					'4': '中药房',
				},
				sheIdIconMap: {
					1: 'el-icon-xy',
					2: 'el-icon-zcy',
				},
				sheIdColorMap: {
					1: '#67C23A',
					2: '#409EFF',
				},
				statusMap: {
					0: '待提交',
					1: '回退提交',
					2: '待审核',
					3: '回退审核',
					4: '待过单',
					5: '已过单',
					6: '已冲销',
					7: '已作废'
				},
				
				putinTypeMap: {
					1: '采购入库',
					2: '其他入库',
					3: '赠送入库',
					4: '盘点单位',
					5: '系统切换入库',
				},
				statusIconMap: {
					0: 'el-icon-document',
					1: 'el-icon-top-left',
					2: 'el-icon-check',
					3: 'el-icon-bottom-right',
					4: 'el-icon-document-checked',
					5: 'el-icon-success',
					6: 'el-icon-delete',
					7: 'el-icon-delete'
				},
				statusColorMap: {
					0: '#909399',
					1: '#67C23A',
					2: '#409EFF',
					3: '#E6A23C',
					4: '#409EFF',
					5: '#409EFF',
					6: '#F56C6C'
				},
			}
		},
		mounted() {
			this.addForm = addForm.map(v => {return v })[0]; // Form
			// 获取当前日期时间
			this.getNowDateTime();
			//获取动态盒子宽度，实时赋值给右侧 => this.$refs.mainRight.offsetWidth;
			this.$nextTick(()=>{
				this.updateWindowWidth();
				window.addEventListener('resize', this.updateWindowWidth);
				this.initButtons(); // 引入全局自定义封装方法
			})
			this.tjsqrq = new Intl.DateTimeFormat('zh-CN').format(new Date());5
			this.tjsqr = JSON.parse(localStorage.getItem('userInfo')).username;
			this.addForm.nullifyId = JSON.parse(localStorage.getItem('userInfo')).userId;
			// 加载数据源
			this.loadData();
			this.currentHeight = this.$getHeights();
			this.getTableHeight();
			this.getGys();
			this.getDrug();
		},
		methods:{
			async loadData(){
				let res = await dugDocPage({
					id:this.GysValue,
					state:this.state,
					startDate:this.startDate,
					endDate:this.endDate,
					pageNum:this.pageNum,
					pageSize:this.pageSize,
				});
				if(res.code === 200 && res.data.content != []){
					this.tableData = res.data.content
					this.totalSize = res.data.totalSize
				}else{
					this.$message({ type: 'error', message: res.message });
					this.tableData = [];
				}
				
			},
			// 权限按钮
			initButtons() {
			    // 获取当前路由路径
			    const currentPath = this.$route.path;
			    // 获取路由对应的权限按钮
			    const routeButtons = this.$getRouteButtons(currentPath);
			    // 合并到现有按钮数组
			    this.feetBtn = this.$mergeButtons(this.defaultButtons, routeButtons);
				console.log(this.feetBtn,'feetBtnfeetBtn');
			},
			// 添加多选变化事件
			handleSelectionChange(val) {
			    // this.multipleSelection = val;
			    // // 判断是否多选（选择超过1个）
			    // const isMultiple = val.length > 1;
			    
			    // // 更新按钮状态
			    // this.updateButtonStates(isMultiple);
			},
			  
			// 更新按钮状态
			updateButtonStates() {
			  this.headerBtn = this.headerBtn.map(button => {
			    if (button.title === '打印') {
			      return {
			        ...button,
			        disabled: !this.canPrint
			      };
			    }
			    return button;
			  });
			},
			// 用于计算table的高度，以便超出高度显示滚动条
			getTableHeight(){
				let headerHeight = this.currentHeight.mainHeight
				let feetHeight = this.currentHeight.feetHeight
				let lastHeight = this.currentHeight.lastHeight
				this.tableHeight = this.currentHeight.rightContentHeight - feetHeight * 3
				console.log(this.tableHeight,'this.tableHeightthis.tableHeight');
			},
			// 选项卡切换事件
			tabsHandleClick(tab, event) {
				console.log(tab, tab.label);
				if(tab.name == '0'){
					this.state = 0;
					this.loadData();
				}else if(tab.name == '2'){
					this.state = 2;
					this.loadData();
				}else if(tab.name == '4'){
					this.state = 4;
					this.loadData();
				}else if(tab.name == '5'){
					this.state = 5;
					this.loadData();
				}else if(tab.name == '6'){
					this.state = 6;
					this.loadData();
				}
			},
			async getGys(){
				// 供应商下拉列表
				let rs = await selectDropDownList()
				this.gysOption = rs.data.content.map(obj => {
				  // 将 name 替换为 label，并保留其他字段
				  return { label: obj.supplierName , ...obj };
				});
			},
			async getDrug(){
				// 药品下拉列表
				let res = await getWare();
				console.log(res,'药品下拉列表');
				if(res.code == 200){
					this.drugOption = res.data.content.map(obj => {
					  // 将 name 替换为 label，并保留其他字段
					  return { label: obj.drugName , ...obj };
					});
				}
			},
			// 计算激活步骤（关键逻辑）
			calcActive(state) {
			  // 状态码与步骤索引的映射关系 => 状态0对应第1个步骤（索引从1开始）
			  const stateMap = { 0:1, 1:2, 2:3, 3:4, 4:5, 5:6, 6:7 }
			  // 返回当前状态对应的步骤索引 如果找不到则默认为0（不激活任何步骤）
			  return stateMap[state] || 0
			  // 或者更简单的数学计算（如果状态码是连续数字）： return Math.min(state + 1, this.statusOption.length)
			},
			// 开始时间变化值
			startDateHandle(value) {
				if (value) {
					// 使用 JavaScript 的 Date 对象格式化日期
					this.startDate = this.formatDate(value);
					// this.loadData();
					this.getTableHeight();
				} else {
					this.startDate = '';
				}
			},
			// 结束时间变化值
			endDateHandle(value){
				if (value) {
				  // 使用 JavaScript 的 Date 对象格式化日期
				  this.endDate = this.formatDate(value);
				  // this.loadData();
				  this.getTableHeight();
				} else {
					this.endDate = '';
				}
			},
			// table合计行
			getSummaries(param) {
				const { columns, data } = param;
				const sums = [];
				columns.forEach((column, index) => {
				  if (index === 1) {
					sums[index] = '总计：';
					return;
				  }else if(index != 9 && index != 10){
					sums[index] = '';
					return;
				  }
				  const values = data.map(item => Number(item[column.property]));
				  if (!values.every(value => isNaN(value))) {
					sums[index] = values.reduce((prev, curr) => {
					  const value = Number(curr);
					  if (!isNaN(value)) {
						return prev + curr;
					  } else {
						return prev;
					  }
					}, 0);
					sums[index] += '（RMB）';
				  } else {
					sums[index] = '';
				  }
				});
				return sums;
			},
			// 修改原有的handleCurrentTableChange方法
			handleCurrentTableChange(val) {
			  this.currentTable = val;
			  // 如果是单选，更新多选数组
			  if (val) {
			    // 找到当前行在表格数据中的索引
			    const index = this.tableData.findIndex(item => item.id === val.id);
			    // 设置该行的选中状态
			    this.$nextTick(() => {
			      this.$refs.table.toggleRowSelection(this.tableData[index], true);
			    });
			    this.multipleSelection = [val];
			  } else {
			    this.multipleSelection = [];
			  }
			  this.updateButtonStates();
			},
			// 打开设置对话框
			openSettings() {
			  // 从会话存储中读取设置
			  const savedSetting = sessionStorage.getItem('quickTransfer');
			  this.quickTransfer = savedSetting ? JSON.parse(savedSetting) : false;
			  this.settingDialogVisible = true;
			  
			  const savedSettingRefer = sessionStorage.getItem('quickRefer');
			  this.quickRefer = savedSetting ? JSON.parse(savedSettingRefer) : true;
			  this.settingDialogVisible = true;
			},
			// 保存设置
			saveSettings() {
			  // 保存到会话存储
			  sessionStorage.setItem('quickTransfer', this.quickTransfer);
			  sessionStorage.setItem('quickRefer', this.quickRefer);
			  this.settingDialogVisible = false;
			  this.$message.success('设置已保存');
			},
			// 循环图标事件
			tooltipsHand(v){
				console.log(v);
				if(v.title == '导出' || v.title.includes('导出')){
					this.$message.error('导出为Excel，Fail!');
				}else if(v.title == '关闭' || v.title.includes('关闭')){
					// 关闭当前页
					setTimeout(() =>{
						window.history.back();
					},888)
				}
			},
			// 展开/折叠所有行
			toggleExpandAll() {
			  // 切换状态
			  this.isExpanded = !this.isExpanded;
			  
			  // 获取表格实例
			  const table = this.$refs.table;
			 //  if(this.tableData.length === 0){
				// // 显示提示信息
				// this.$message({ type: 'success', message: '当前表格暂无数据' });
			 //  }
			  // 根据当前状态展开或折叠所有行
			  this.tableData.forEach(row => {
			    table.toggleRowExpansion(row, this.isExpanded);
			  });
			  // 显示提示信息
			  // this.$message({ type: 'success', message: this.isExpanded ? '已展开所有行' : '已折叠所有行' });
			},
			// 草稿编辑
			handleClickEdit(row){
				row.nameTitle = '编辑'
				console.log(row);
				if(row.state == 0){
					this.$refs.sonRef.open(row) //打开编辑Model
				}else{
					this.$message.error('只有草稿单据才能被修改!');
				}
			},
			// 草稿删除
			handleDelete(row) {
				if(row.state == 0){
					this.$confirm("此操作将永久删除该条入库数据, 是否继续?", "提示", {
					  confirmButtonText: "确定",
					  cancelButtonText: "取消",
					  type: "warning",
					})
					  .then(async() => {
						// 状态 => 作废 
						this.addForm.id = row.id;
						let result = await deleteDoc({ id: row.id });
						if (result.code === 200) {
							this.$message({ type: 'success', message: result.message });
							this.loadData(); // 更新数据驱动
						} else {
							this.$message.error(result.message)
						}
					  })
					  .catch(() => {
						this.$message({ type: "info",message: '已取消'});
					  });
				}else{
					this.$message.error('只有草稿单据才能被删除!');
				}
			},
			found(){
				// console.log(this.GysValue ,'this.GysValue this.GysValue ');
				this.loadData();
			},
			// 当前日期时间
			formatDate(date) {
			      const year = date.getFullYear();
			      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
			      const day = String(date.getDate()).padStart(2, '0');
			      const hours = String(date.getHours()).padStart(2, '0');
			      const minutes = String(date.getMinutes()).padStart(2, '0');
			      const seconds = String(date.getSeconds()).padStart(2, '0');
			      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			// 将当前日期时间设置为夜晚十一点五十九分
			getNowDateTime(){
				// 获取当前日期时间
				const now = new Date();
				// 格式化日期时间
				// 将时间设置为凌晨十二点
				const midnight = new Date(now);
				midnight.setHours(0, 0, 0, 0);
				this.startDate = this.formatDate(midnight);
				// 将时间设置为夜晚十一点五十九分
				const evening = new Date(now);
				evening.setHours(23, 59, 0, 0);
				this.endDate = this.formatDate(evening);
			},
			// 时间处理
			changDate(val){
				let i = this.idx
				switch(i) {
					case 5:
					function formatDate(date) {
					  const year = date.getFullYear();
					  const month = (date.getMonth() + 1).toString().padStart(2, '0');
					  const day = date.getDate().toString().padStart(2, '0');
					  return `${year}-${month}-${day}`;
					}
					const now = new Date();
					this.addForm.busDate = formatDate(val);
				}
			},
			getRowKeys(row) {
			    return row.id; // 使用行的唯一标识作为key
			},
			// 重置按钮
			rest(){
				this.ksValue = '';
				this.GysValue = '';
				this.drugValue = '';
				this.startDate = '';
				this.endDate = '';
			},
			GysSelected(){
				this.loadData();
			},
			// 清空科室选项
			clearKs(){
				this.ksValue = '';
				// this.loadData();
			},
			// 清空供货单位选项
			clearGys(){
				this.GysValue = '';
				// this.loadData();
			},
			// 清空药品名称选项
			clearDrug(){
				this.drugValue = '';
				// this.loadData();
			},
			// headers commond
			handleCommand(command) {
			  // console.log(command);
			  // 根据 command 值执行相应的逻辑
			  switch (command) {
				case 'a':
				  // 处理a的逻辑
				  this.auditStatus = ''
				  this.DropDownedName = '全部单据'
				  this.loadData();
				  break;
				case 'b':
				  // 处理b的逻辑
				  this.auditStatus = 2
				  this.DropDownedName = '已提交'
				  this.loadData();
				  break;
				case 'c':
				  // 处理b的逻辑
				  this.auditStatus = 4
				  this.DropDownedName = '已审核'
				  this.loadData();
				  break;
				// ... 其他 case
				case 'd':
				  // 处理b的逻辑
				  this.auditStatus = 5
				  this.DropDownedName = '已过单'
				  this.loadData();
				  break;
				case 'e':
				  // 处理e的逻辑
				  this.auditStatus = 6
				  this.DropDownedName = '已作废'
				  this.loadData();
				  break;
			  }
			},
			// 步骤
			handClick(v,i) {
				 // i event
				  // 处理逻辑 => 打印
				if(v.title == '打印' || v.title.includes('打印')){
					if(!this.currentTable || this.currentTable.length === 0){
					  this.$message({ type: 'warning', message: '请先单击选择一条数据'});
					} else if(this.currentTable.state != 5) {
					  this.$message({ type: 'error', message: '只能打印已过单的数据!'});
					} else {
					  this.currentTable.name = '打印'
					  this.$refs.exaRef.openModel(this.currentTable)
					}
				}
				// 处理逻辑 => 页面刷新
				else if(v.title == '刷新' || v.title.includes('刷新')){
					this.loading = true;
					setTimeout(() => {
						this.reload();
						this.$message({type:'success',message:'已刷新'})
						this.loading = false;		
					}, 1500)
				}
				// 处理逻辑 => 高级选项设置
				else if(v.title == '高级选项' || v.title.includes('高级')){
					this.openSettings();
				}
			},
			feetHandClick(v,i){
				// 获取当前操作按钮
				const button = this.feetBtn[i];
				// 如果按钮被禁用，直接返回
				if (button.disabled) {
					this.$message.warning('当前操作不可用');
					return;
				}
				// 处理逻辑 => 新增
				if(v.title == '新增' || v.title.includes('新增')){
					// 处理索引2的逻辑 => 新增 -> 调用子组件
					let parma = {
						nameTitle : '新增【西药房】其他入库'
					}
					// this.nameTitle = '新增【西药房】其他入库'
					this.$refs.sonRef.open(parma);
				}
				// 处理逻辑 => 修改
				else if (v.title == '修改' || v.title.includes('修改')){
					// 处理索引1的逻辑 => 修改
					if(this.currentTable.length != 0){
						this.currentTable.nameTitle = '修改'
						console.log(this.currentTable,'this.currentTable');
						this.$refs.sonRef.open(this.currentTable);
					}else{
						this.$message({ type: 'warning', message: '请先选择一条数据'});
					}
				}
				// 处理逻辑 => 冲销
				else if (v.title == '冲销' || v.title.includes('冲销')){
					if(this.currentTable.length === 0){
						this.$message({ type: 'warning', message: '请先单击选择一条数据'});
					}else if(this.currentTable.state != 5){
						this.$message({ type: 'error', message: '只能冲销已过单的数据！'});
					}else{
						this.currentTable.name = '冲销'
						this.$refs.exaRef.openModel(this.currentTable)
					}
				}
				// 处理逻辑 => 查看
				else if(v.title == '查看' || v.title.includes('查看')){
					if(this.currentTable.length === 0){
						this.$message({ type: 'warning', message: '请先单击选择一条数据'});
					}else{
						this.currentTable.name = '查看采购入库明细'
						this.$refs.exaRef.openModel(this.currentTable)
					}
				}
				// 处理逻辑 => 提交
				else if(v.title == '提交' || v.title.includes('提交')){
					if(this.currentTable.length === 0){
						this.$message({ type: 'warning', message: '请先单击选择一条数据'});
					}else if(this.currentTable.state != 0){
						this.$message({ type: 'error', message: '只能提交草稿数据！'});
					}else{
						this.currentTable.name = '草稿'
						this.$refs.exaRef.openModel(this.currentTable)
					}
				}
				// 处理逻辑 => 审核
				else if(v.title == '审核' || v.title.includes('审核')){
					if(this.currentTable.length === 0){
						this.$message({ type: 'warning', message: '请先单击选择一条数据'});
					}else if(this.currentTable.state != 2){
						this.$message({ type: 'error', message: '只能审核已提交的数据！'});
					}else{
						this.currentTable.name = '审核'
						this.$refs.exaRef.openModel(this.currentTable)
					}
				}
				// 处理逻辑 => 过单
				else if(v.title === '过单' || v.title.includes('过单')){
					if(this.currentTable.length === 0){
						this.$message({ type: 'warning', message: '请先单击选择一条数据'});
					}else if(this.currentTable.state != 4){
						this.$message({ type: 'error', message: '只能过单已审核的数据！'});
					}else{
						this.currentTable.name = '过单'
						this.$refs.exaRef.openModel(this.currentTable)
					}
				}
				// 处理Excel导入
				else if (v.title === 'Excel表格导入' || v.title.includes('Excel')) {
				    this.handleExcelImport();
				}
				// 处理逻辑 => 关闭
				else if(v.title === '关闭' || v.title.includes('关闭')){
					setTimeout(() =>{
						window.history.back();
					},888)
				}
				// 处理逻辑 => 未知错误
				else{
					this.$message({ type: 'danger', message: this.undefind });
				}
				// i event
			},
			// 处理Excel导入按钮点击
			// 打开Excel导入对话框
			    handleExcelImport() {
			      this.excelDialogVisible = true;
			      this.resetImportData();
			    },
			    
			    // 重置导入数据
			    resetImportData() {
			      this.excelFileList = [];
			      this.excelTableData = [];
			      this.excelColumns = [];
			      this.fileList = [];
			      this.filePath = '';
			      this.currentPage = 1;
			    },
			    
			    // 上传前校验
			    beforeExcelUpload(file) {
			      const isExcel = file.type.includes('excel') || 
			                     file.name.endsWith('.xlsx') || 
			                     file.name.endsWith('.xls');
			      const isLt10M = file.size / 1024 / 1024 < 10;
			
			      if (!isExcel) {
			        this.$message.error('只能上传Excel文件!');
			        return false;
			      }
			      if (!isLt10M) {
			        this.$message.error('文件大小不能超过10MB!');
			        return false;
			      }
			      return true;
			    },
			    
			    // 处理文件变化
			    handleExcelChange(file, fileList) {
			      if (fileList.length > 1) {
			        this.excelFileList = [fileList[fileList.length - 1]];
			        return;
			      }
			      
			      this.excelFileList = fileList;
			      this.filePath = file.name;
			      
			      // 更新文件列表
			      this.fileList = [{
			        name: file.name,
			        path: file.name,
			        status: '待处理'
			      }];
			      
			      // 读取Excel内容
			      this.readExcel(file.raw);
			    },
			    
			    // 重新选择文件
			    reSelectFile() {
			      this.resetImportData();
			    },
			    
			    // 移除文件
			    removeFile() {
			      this.resetImportData();
			    },
			    
			    // 读取Excel文件
			    readExcel(file) {
			      this.loading = true;
			      const reader = new FileReader();
			      
			      reader.onload = (e) => {
			        try {
			          const data = new Uint8Array(e.target.result);
			          const workbook = XLSX.read(data, { type: 'array' });
			          
			          const firstSheetName = workbook.SheetNames[0];
			          const worksheet = workbook.Sheets[firstSheetName];
			          
			          const jsonData = XLSX.utils.sheet_to_json(worksheet);
			          
			          if (!jsonData || jsonData.length === 0) {
			            this.$message.warning('Excel文件没有数据');
			            return;
			          }
			          
			          // 处理表头
			          this.excelColumns = Object.keys(jsonData[0]).map(key => ({
			            prop: key,
			            label: key,
			            width: 150
			          }));
			          
			          this.excelTableData = jsonData;
			          this.fileList[0].status = '导入成功';
			          
			          this.$message.success('Excel解析成功');
			        } catch (error) {
			          console.error('Excel解析错误:', error);
			          this.fileList[0].status = '失败';
			          this.$message.error('Excel文件解析失败: ' + error.message);
			        } finally {
			          this.loading = false;
			        }
			      };
			      
			      reader.onerror = (error) => {
			        console.error('文件读取错误:', error);
			        this.fileList[0].status = '失败';
			        this.$message.error('文件读取失败');
			        this.loading = false;
			      };
			      
			      reader.readAsArrayBuffer(file);
			    },
			    
			    // 提交Excel数据
			    submitExcel() {
			      if (this.excelTableData.length === 0) {
			        this.$message.warning('请先上传有效的Excel文件');
			        return;
			      }
			
			      this.loading = true;
			      // 这里调用你的API
			      this.$axios.post('/api/importExcel', {
			        data: this.excelTableData
			      })
			      .then(response => {
			        this.$message.success('导入成功');
			        this.excelDialogVisible = false;
			        this.loadData(); // 刷新数据
			      })
			      .catch(error => {
			        this.$message.error('导入失败: ' + error.message);
			      })
			      .finally(() => {
			        this.loading = false;
			      });
			    },
			// db events
			// col 里面包含了表头字段和名称，list 是表格数据
			columnWidth(col, list) {
			  let prop = col.prop,lab = col.lab;
			  let width = 20; // 设定一个最小值
			  let maxlenStr = ""; // 最长字符串
			  for (let info of list) {
				if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
			  }
			  width = Math.max(width, len(lab), len(maxlenStr));
			  // 表格自带的内边距(20px) 自调
			  return width + 20; // 这里加了 12px
			  function len(str) {
				// 实际分配长度可根据需要自行调整
				let length = 12;
				for (const char of str + "") {
				  // 英文小写字符 8px
				  if ("a" <= char && char <= "z") length += 8;
				  // 数字
				  else if (Number.isFinite(Number(char))) length += 12;
				  // 英文大写字符 8px
				  else if ("A" <= char && char <= "Z") length += 8;
				  // 中文字符 28px
				  else if (char >= "\u4e00" && char <= "\u9fa5") length += 14;
				  // 其他 8px
				  else length += 12;
				}
				return length;
			  }
			},
			// addDiglog Close
			handleClose(done) {
				this.$confirm('确认关闭？')
				  .then(_ => {
					done();
				  })
				  .catch(_ => {
				});
			},
			//分页
			//每页条数改变触发
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageNum = val;
				this.loadData();
			},
			//当前条数改变触发
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.pageNum = val;
				this.loadData();
			},
			// 实时宽度
			updateWindowWidth() {
				this.windowWidth = window.innerWidth - 188;
			},
			// 分页变化
			handlePageChange(val) {
			  this.currentPage = val;
			}
		},
		filters: {
		formatTime(timestamp) {
		  if (!timestamp) return 'N/A'
		  return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
		}
		},
	}
</script>

<style lang="less" scoped>
	/deep/ .el-tabs__item{
		font-size: 12px;
	}
	/deep/ .el-tabs__header{
		margin: 0px;
	}
	.box{
		display: flex;
		flex-direction: column;
		height: calc(100vh - 64px); // 减去导航栏高度
		width: 100%;
		overflow: hidden;
		.main {
			flex: 1;
		    display: flex;
		    flex-direction: column;
		    overflow: hidden;
		.header{
			flex-shrink: 0; /* 防止header被压缩 */
			background-color: #fff;
			.header-tab{
				display: flex;
				border-bottom: 1px solid #dcdfe6;
				align-items: center;
				.iconTitle{
					display: flex;
					align-items: center;
				}
				.tabs{
					padding-left: 8px;
				}
			}
			.header-bottom{
				background-color: #fff;
				/deep/ .el-select>.el-input{
					height: 28px;
					line-height: 28px;
				}
				gap:8px;
				display: flex;
				align-items: center;
				justify-content: start;
				width: 100%;
				height: 40px;
				line-height: 40px;
				flex-wrap: wrap;
				.main-icon-b{
					display: flex;
					align-items: center;
					padding: 12px;
					width: 100%;
					margin-left: 12px;
				}
			}
			.header-btns{
				display: flex;
				justify-content: space-between;
				height: 40px;
				padding: 8px;
				line-height: 60px;
				align-items: center;
				background-color: #f1f1f1;
				.headBtn{
					display: flex;
					align-items: center;
				}
				.feetBtn{
					display: flex;
					align-items: center;
				}
			}
		}
		.table{
			flex: 1;
			  overflow: hidden;
			  display: flex;
			  flex-direction: column;
			/deep/ .el-table {
				flex: 1;
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100% !important; /* 强制表格高度填充容器 */
			    // height: 100% !important;
				.el-table__header-wrapper {
				      flex-shrink: 0;
				    }
				    
				    .el-table__body-wrapper {
				      flex: 1;
				      overflow-y: auto;
				    }	
				.el-table__footer-wrapper {
				      flex-shrink: 0;
				      height: 48px !important;
					  display: flex;
					  align-items: center;
				      position: sticky;
				      bottom: 0;
				      background-color: #f5f7fa;
				      z-index: 1;
				      box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
				      
				      .cell {
				        height: 48px;
				        line-height: 48px;
						width: 128px;
				        font-weight: bold;
				        color: brown;
				      }
				    }
			    /* 确保表格主体可以滚动 */
				.el-table__body-wrapper {
				  overflow-y: auto;
				  // overflow-x: hidden;
				}
				
				/* 处理展开行高度 */
				.el-table__expand-column {
				  .cell {
					padding: 0;
				  }
				}
			}
			/deep/ .el-table .cell{
			}
			/deep/ .el-table th{
				color: #2d2d2d;
				font-weight: bold;
				font-size: 12px;
				height: 18px;
				line-height: 18px;
			}
			/deep/ .el-table th.el-table__cell>.cell{
				border-right: 2px solid #ececec;
				height: 18px;
				line-height: 18px;
				display: flex;
				align-items: center;
			}
			/deep/ .el-table td.el-table__cell div{
				font-size: 12px;
				height: 18px;
				line-height: 18px;
			}
			// padding: 16px;
			/* 自定义高亮颜色 */
			::v-deep .el-table__body tr.current-row > td {
			  background-color: #55aaff !important;
			  color: #f9f9f9; /* 可选：修改文字颜色 */
			}
			
			.stateValue{
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    background-color: var(--primary-color, #409EFF) !important;
			    color: var(--text-color, #304156) !important;
			    border: 1px solid var(--text-color, #304156) !important;
			  }
		}
		.feet {
		  flex-shrink: 0; /* 防止footer被压缩 */
		  height: 40px;
		  display: flex;
		  justify-content: flex-end;
		  align-items: center;
		  padding: 0 20px;
		  background-color: #f5f7fa;
		  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		  z-index: 10;
		  
		  /deep/ .el-pagination {
			margin: 0 !important;
		  }
		}
		}
		.tool{
			// self
			/deep/ .el-dialog__header{
				padding: 4px;
				background-color: #007bb0;
			}
			/deep/ .el-dialog__title{
				color: #fff;
				font-size: 12px;
			}
			/deep/ .el-dialog__headerbtn{
				top: 10px;
			}
			/deep/ .el-dialog__body{
				padding: 10px;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close{
				color: #fff;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
				background-color: brown;
			}
			/deep/ .el-table .cell{
				font-size: 12px;
				font-weight: 400;
				color: #0c0c0c;
				text-align: center;
			}
			/* 自定义高亮颜色 */
			::v-deep .el-table__body tr.current-row > td {
			  background-color: #00557f !important;
			  color: #f9f9f9; /* 可选：修改文字颜色 */
			}
			/deep/ .el-table .el-table__cell{
				padding: 8px 0;
			}
		}
		.excel{
			display: flex;
			align-items: center;
			justify-content: center;
			/deep/ .el-dialog__header{
				padding: 4px;
				background-color: #007bb0;
			}
			/deep/ .el-dialog__title{
				color: #fff;
				font-size: 12px;
			}
			/deep/ .el-dialog__headerbtn{
				top: 10px;
			}
			/deep/ .el-dialog__body{
				padding: 10px;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close{
				color: #fff;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
				background-color: brown;
			}
			/deep/ .el-table .cell{
				font-size: 12px;
				font-weight: 400;
				color: #0c0c0c;
				text-align: left;
			}
			/* Excel导入样式 */
			.excel-import-dialog {
			  .el-dialog__body {
			    padding: 10px 20px;
			  }
			}
			
			.excel-import-container {
			  display: flex;
			  height: 600px;
			  
			  .left-panel {
			    flex: 1;
			    display: flex;
			    flex-direction: column;
			    padding-right: 15px;
			    border-right: 1px solid #ebeef5;
			    
			    .upload-header {
			      padding: 10px 0;
			      
			      .upload-demo {
			        text-align: center;
			      }
			    }
			    
			    .file-info {
			      flex: 1;
			      display: flex;
			      flex-direction: column;
			      
			      .file-type-select {
			        padding: 10px 0;
			        
			        .el-form-item {
			          margin-bottom: 10px;
			        }
			      }
			      
			      .file-table {
			        flex: 1;
			        overflow: hidden;
			      }
			    }
			    
			    .action-footer {
			      padding: 10px 0;
			      text-align: center;
			      
			      .el-button {
			        width: 100%;
			      }
			    }
			  }
			  
			  .right-panel {
			    flex: 2;
			    display: flex;
			    flex-direction: column;
			    padding-left: 15px;
			    overflow: hidden; /* 防止整体溢出 */
			    .preview-header {
			      padding: 10px 0;
			      border-bottom: 1px solid #ebeef5;
			      
			      h4 {
			        margin: 0;
			        font-size: 14px;
			        color: #606266;
			      }
			    }
			    
			    .preview-table {
			      flex: 1;
				  width: 100%;
			      overflow: hidden;
			    }
			    
			    .pagination-footer {
			      padding: 10px 0;
			      text-align: center;
			      border-top: 1px solid #ebeef5;
			    }
			  }
			}
			
			.el-upload-dragger {
			  width: 100%;
			  padding: 20px;
			}
			
			.el-upload__tip {
			  font-size: 12px;
			  color: #909399;
			  margin-top: 5px;
			}
		}
		
	}
</style>